<template>
  <div class="wrap-container sn-container">
    <div class="sn-content">
      <div class="sn-title">报警类型</div>
      <div class="sn-body">
        <div class="wrap-container">

          <div class="table">
            <table border="0" cellpadding="0" cellspacing="0" class="table-header">
              <tbody>
                <tr>
                  <td width="60%">
                    <span>标 题</span>
                  </td>
                  <td width="20%">
                    <span>日 期</span>
                  </td>
                  <td width="20%">
                    <span>热 度</span>
                  </td>
                </tr>
              </tbody>
            </table>

            <vue-seamless-scroll :data="listData" class="seamless-warp" :class-option="optionSetting">
              <table border="0" cellpadding="0" cellspacing="0" class="item">
                <tbody>
                  <tr v-for="(item, index) in listData" :key="index">
                    <td width="100%" class="title">
                      <span>{{ item.title }}</span>
                    </td>
                    <td width="20%">
                      <span>{{ item.date }}</span>
                    </td>
                    <td width="20%">
                      <span :class="{ colorRed: item.hot > 4999, colorOrange: item.hot < 10 }">{{ item.hot }}</span>
                    </td>
                  </tr>
                </tbody>
              </table>
            </vue-seamless-scroll>
          </div>

        </div>
      </div>
    </div>
  </div>
</template>

<script>
import vueSeamlessScroll from 'vue-seamless-scroll'

export default {
  name: "seamless",
  components: {
    vueSeamlessScroll
  },
  data() {
    return {
      listData: [{
        title: '钱花哪了?一图带你读懂年轻人的消费观',
        date: '2020-05-05',
        hot: 2306
      }, {
        title: '“五一”假期前三天国内旅游收入超350亿元',
        date: '2020-05-02',
        hot: 5689
      }, {
        title: '滴滴、美团、哈啰交战，本地生活会是终局？',
        date: '2020-05-02',
        hot: 9
      }, {
        title: '“互联网+文化”逆势上行文娱消费云端真精彩',
        date: '2020-04-25',
        hot: 288
      }, {
        title: '乐观还是悲观？巴菲特是个现实主义者！',
        date: '2020-04-21',
        hot: 158
      }, {
        title: 'B站的后浪，会把爱优腾拍在沙滩上吗?',
        date: '2020-04-20',
        hot: 889
      }, {
        title: '华为如何做投资的：先给两亿订单一年上市',
        date: '2020-04-01',
        hot: 5800
      }, {
        title: '马斯克：特斯拉股价太高了，我要卖豪宅',
        date: '2020-03-25',
        hot: 6
      }, {
        title: '人民日报海外版：云模式巧解“就业难”',
        date: '2020-03-16',
        hot: 88
      }, {
        title: '刚刚港股"崩了"：狂跌近1000点！',
        date: '2020-03-12',
        hot: 88
      }, {
        title: '个人健康信息码国家标准发布',
        date: '2020-02-28',
        hot: 5
      }, {
        title: '传软银国际裁员约10%两名管理合伙人离职',
        date: '2020-02-15',
        hot: 258
      }, {
        title: '27万个岗位：区块链、人工智能等专场招聘',
        date: '2020-02-10',
        hot: 198
      }, {
        title: '一季度电商发展势头迅猛农村电商破1300万家',
        date: '2020-02-08',
        hot: 19
      }]
    }
  },
  computed: {
    optionSetting() {
      return {
        step: 0.5, // 数值越大速度滚动越快
        limitMoveNum: 2, // 开始无缝滚动的数据量 this.dataList.length
        hoverStop: true, // 是否开启鼠标悬停stop
        direction: 1, // 0向下 1向上 2向左 3向右
        // autoPlay: false,
        openWatch: true, // 开启数据实时监控刷新dom
        singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
        singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
        waitTime: 1000 // 单步运动停止的时间(默认值1000ms)
      }
    }
  },
  mounted() {

  },
  methods: {

  },
  beforeDestroy() {

  }
};
</script>

<style lang="scss" scoped>
.sn-container {
  left: 1370px;
  top: 110px;

  %table-style {
    width: 100%;
    height: 35px;
    table-layout: fixed;

    tr {
      td {
        padding: 10px 5px;
        text-align: center;
        background-color: transparent;
        white-space: nowrap;
        overflow: hidden;
        color: #E2E5FF;
        font-size: 14px;
      }
    }
  }

  .table {
    .table-header {
      @extend %table-style;
    }

    .seamless-warp {
      height: 400px;
      overflow: hidden;
      visibility: visible;

      .colorRed {
        color: #FF4669;
      }

      .colorOrange {
        color: #FFC956;
      }

      .item {
        height: auto;
        @extend %table-style;

        tr {
          td {
            &.title {
              text-overflow: ellipsis;
              display: inline-block;
            }
          }
        }
      }
    }
  }
}
</style>
